<template>

    <div class="lianxi">
        <div class="swiper-container">
	    	<div class="swiper-wrapper">
		        <div class="swiper-slide"><img v-bind:src="imgc" style="width: 100%"/></div>
		        <div class="swiper-slide"><img v-bind:src="imgc" style="width: 100%"/></div>
		        <div class="swiper-slide"><img v-bind:src="imgc" style="width: 100%"/></div>
	    	</div>
	    <div class="swiper-pagination"></div>
		</div>
		<div class="faxian-input">
			<input type="text" name=""  placeholder="搜索值得购买的好物">
		</div>
		<div class="faxian-wenzi"><p>推荐小组</p><h3>查看全部</h3></div>
		<div class="swiper-container-s">
	        <div class="swiper-wrapper">
	          <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
		        <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
		        <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
		        <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
		        <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
		        <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
            <div class="swiper-slide"><img v-bind:src="imga" style="width: 100%"/><p>{{span}}</p></div>
	        </div>
    </div>
    <div class="faxian-kongbai"></div>
    <div class="faxian-fenbu">
    <div class="faxian-wenti">
    <p>推荐小组</p>
    <h3>查看全部</h3>
    </div >
      
      <div class="faxian-fenbu">
        <dl>
          <dt><img v-bind:src="iiiiiiimg"></dt>
          <dd>
          <h2>你的520礼物</h2>
          <p>233人已参与</p>
          </dd>
          </dl>
        </dl>
        <dl>
          <dt><img v-bind:src="iiiiiiimg"></dt>
          <dd>
          <h2>你的520礼物</h2>
          <p>233人已参与</p>
          </dd>
          </dl>
        </dl>

      </div>
          <div class="faxian-fenbu">
        <dl>
          <dt><img v-bind:src="iiiiiiimg"></dt>
          <dd>
          <h2>你的520礼物</h2>
          <p>233人已参与</p>
          </dd>
          </dl>
        </dl>
        <dl>
          <dt><img v-bind:src="iiiiiiimg"></dt>
          <dd>
          <h2>你的520礼物</h2>
          <p>233人已参与</p>
          </dd>
          </dl>
        </dl>
      </div>
    </div>
    <ul class="tabs">
      <li v-for="(list,index) in lists" @click="tab = index"
      :class="{active:tab == index}">
        {{list.lis}}
      </li>
    </ul>
    <div class="faxian-box">
      <div class="faxian-boxone" v-show="tab == 0">
        <div class="faxian-yonghu">
          <dl>
            <dt><img v-bind:src="yonghu"></dt>
            <dd><h1>船笛</h1><p>5分钟前</p></dd>
          </dl>
          <span>关注</span>
          <img v-bind:src="faixanlogo">
          <h5>书名《我还是喜欢你》</h5>
          <h6>封面是我喜欢的风格呢~</h6>
        </div>
      </div>
      <div class="faxian-boxtwo" v-show="tab == 1">
        <div class="faxian-yonghu">
          <dl>
            <dt><img v-bind:src="yonghu"></dt>
            <dd><h1>船笛</h1><p>5分钟前</p></dd>
          </dl>
          <span>关注</span>
          <img v-bind:src="faixanlogo">
          <h5>书名《我还是喜欢你》</h5>
          <h6>封面是我喜欢的风格呢~</h6>
        </div>
      </div>
      <div class="faxian-boxthree" v-show="tab == 2">
        <div class="faxian-yonghu">
          <dl>
            <dt><img v-bind:src="yonghu"></dt>
            <dd><h1>船笛</h1><p>5分钟前</p></dd>
          </dl>
          <span>关注</span>
          <img v-bind:src="faixanlogo">
          <h5>书名《我还是喜欢你》</h5>
          <h6>封面是我喜欢的风格呢~</h6>
        </div>
      </div>
    </div>
    </div>
</template>

<script type="text/javascript">
export default {
  name: 'lianxi',
  data () {
    return{
      imgc:"../../static/homelunbo.png",
      imga:'../../static/swiper.png',
      span:"一起来剁手",
      iiiiiiimg:"../../static/daxiaindsssda.png",
      yonghu:"../../static/yonghutoux.png",
      faixanlogo:"../../static/faxianlogo.png",
      tab:0,
      lists:[
        {lis:'最新'},{lis:'热门'},{lis:'关注'},

      ]
    }
  },
   mounted () {
      window.Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        autoplay : 1000
      }),
       window.Swiper('.swiper-container-s', {
        pagination: '.swiper-pagination',
        slidesPerView: 3.7,
        paginationClickable: true,
        spaceBetween: 10
    });
    }, 

}
</script>


<style scoped lang="less">
 @import url(../assets/less/faxian.less);

</style>
